<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        background-image: linear-gradient(
                to bottom right,
                #91defe,
                #99c0f9,
                #bdb6ec,
                #d7b3e3,
                #efb3d5,
                #f9bccc
        );
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
    }
    .ball {
        animation: float 3.5s ease-in-out infinite;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        position: relative;

        background: radial-gradient(
                circle at 75% 30%,
                white 5px,
                aqua 8%,
                darkblue 60%,
                aqua 100%
        );
        box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc,
        inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea,
        inset 0 50px 140px #fde9ea, 0 0 90px #fff;
    }

    @keyframes float {
        0% {
            transform: translatey(0px);
        }
        50% {
            transform: translatey(-80px);
        }
        100% {
            transform: translatey(0px);
        }
    }

    .shadow {
        background: #b490b2;
        width: 150px;
        height: 40px;
        top: 70%;
        animation: expand 4s infinite;
        position: absolute;
        border-radius: 50%;
    }
    @keyframes expand {
        0%,
        100% {
            transform: scale(0.5);
        }

        50% {
            transform: scale(1);
        }
    }

    @media only screen and (max-width: 500px) {
        .ball {
            animation: float 4.5s ease-in-out infinite;
            height: 120px;
            width: 120px;

            background: radial-gradient(
                    circle at 65% 35%,
                    white 5px,
                    aqua 15%,
                    darkblue 50%,
                    aqua 100%
            );
            box-shadow: inset 0 -20px 30px #fff, inset 40px 0 46px #eaf5fc,
            inset 58px 0px 60px #c2d8fe, inset -8px -30px 100px #fde9ea,
            inset 0 20px 110px #fde9ea, 0 0 90px #fff;
        }
        .shadow {
            width: 90px;
            height: 20px;
            top: 78%;
            animation: expand 5s infinite;
        }

        @keyframes float {
            0% {
                transform: translatey(0px);
            }
            50% {
                transform: translatey(-50px);
            }
            100% {
                transform: translatey(0px);
            }
        }
    }

</style>
<body>
<div class="ball">

</div>
<div class="shadow"></div>
</body>
</html>